<template>
  <el-select
    filterable
    v-model="host_value_"
    placeholder="请选择"
    @change="selectChange"
  >
    <el-option
      v-for="item in host_options"
      :key="item.host_id"
      :label="item.host_ip"
      :value="item.host_id"
    >
    </el-option>
  </el-select>
</template>

<script>
import * as Request from "../../general/request";
import { ElMessage } from "element-plus";
import { onMounted, ref, watch } from "vue";

export default {
  name: "sys_code",
  props: {
    in_type: String,
    in_value: String,
    host_value: String,
  },
  setup(props, { emit }) {
    let host_value_ = ref(props.host_value);
    const host_options = ref([]);

    const selectChange = (val) => {
      emit("childClick", val);
    };

    const start_query = () => {
      if (props.in_type === "env") {
        get_env_host();
      }
    };

    const get_env_host = async () => {
      const response = await Request.GET(
        "/background/home/resource_management/env_hosts",
        { env_id: props.in_value }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          host_options.value = return_data.data;
          // ElMessage.success(return_data.msg)
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    watch(props, (new_val) => {
      host_value_.value = new_val.host_value;
    });

    onMounted(start_query);

    return {
      selectChange,
      props,
      host_value_,
      host_options,
    };
  },
};
</script>

<style scoped></style>
